"use strict";
var factory = {
	createMap: function(info) {
		var node = copyTemplate("map");
		for (var y = 0; y < info.length; y++) {
			for (var x = 0; x < info[0].length; x++) {
				var elemnode = this.createMapelem({
					elem: info[y][x],
					x: x,
					y: y
				});
				node.append(elemnode);
			}
		}
		return node;
	},
	createMapelem: function(info) {
		var node = copyTemplate("mapelem")
			.addClass(info.elem)
			.addClass("mapelem");
		setPosi("mapelem", node, {
			x: info.x,
			y: info.y
		});
		setSize("mapelem", node);
		var firstletter = info.elem.substr(0, 1).toUpperCase();
		firstletter != "F" && node.text(firstletter);
		return node;
	},
	createLineup: function(info) {
		var nodes = [];
		$.each(info, function(y, arr) {
			$.each(arr, function(x, e) {
				if (e) {
					var node = copyTemplate("lineup").addClass(e);
					setPosi("lineup", node, {
						x: x,
						y: y
					});
					setSize("lineup", node);
					nodes.push(node);
				}
			});
		});
		return nodes;
	},
	createRole: function(info) {
		var nodes = [];
		$.each(info, function(y, arr) {
			$.each(arr, function(x, e) {
				if (e) {
					var node = copyTemplate("role")
						.addClass(e.role)
						.addClass("army" + e.color)
						.css("font-family", "Inconsolata")
						.text(e.role.substr(0, 2));
					setPosi("role", node, {
						x: x,
						y: y
					});
					setSize("role", node);
					nodes.push(node);
				}
			});
		});
		return nodes;
	},
	createStatus: function(info) {
		var node = copyTemplate("status");
		node.find(".armycolor").css("background-color",info.color)
		node.find(".rolename").text(info.role);
		setProgress("hp");
		setProgress("mp");
		setGraph("power");
		setGraph("damage", 25);
		setGraph("speed", 10);
		setBuff();
		return node;

		function setProgress(name) {
			setTimeout(function() {
				var barwidth = node.width();
				var maxwidth = barwidth * .7;
				var currwidth = maxwidth * info[name] / info[name + "max"];
				maxwidth -= currwidth;
				node.find("." + name + " .max.progress").width(currwidth);
				node.find("." + name + " .curr.progress").width(maxwidth);
			}, 50);
		}

		function setGraph(name, scale) {
			scale = scale || 1;
			var graphnode = node.find("." + name + " .graph");
			var count = ~~(info[name]/scale);
			while(count--){
				graphnode.append("<div class='graphitem'></div>");
			}
		}

		function  setBuff () {
			var buffnode = node.find(".buff");
			$.each(info.buff,function(i,n){
				buffnode.append("<img class='buffitem' src='./images/"+n+".jpg'></img>");
			});
		}
	}
};


function copyTemplate(name) {
	return $("#template ." + name).clone();
}

function setPosi(name, node, posi) {
	var boxsize = getCfg("base").boxsize;
	var cfg = getCfg(name);
	node.css({
		"left": posi.x * boxsize + boxsize / 2 - cfg.size / 2,
		"top": posi.y * boxsize + boxsize / 2 - cfg.size / 2
	}).data("posi", posi);
}



function setSize(name, node) {
	var cfg = getCfg(name);
	node.width(cfg.size).height(cfg.size).css({
		"line-height": cfg.size + "px",
		"font-size": cfg.size * .85 + "px"
	});
}



function getPosi(node) {
	return node.data("posi");
}


function loadSence(sencename) {
	var demonode = $("#demo");
	if (!demonode.find("." + sencename).length) {
		var senceinfo = getSence(sencename);
		demonode.append(renderSence(sencename, senceinfo));
	}
	demonode.find(".sence." + sencename).show().siblings().hide();
}


function renderSence(sencename, info) {
	var basecfg = getCfg("base");
	var sencenode = copyTemplate("sence")
		.addClass(sencename)
		.width(basecfg.boxsize * basecfg.mapwidth)
		.height(basecfg.boxsize * basecfg.mapheight);
	if (info.map) {
		var mapnode = factory.createMap(info.map);
		sencenode.append(mapnode);

	}
	if (info.lineup) {
		var lineupnodes = factory.createLineup(info.lineup);
		sencenode.append.apply(sencenode, lineupnodes);
	}
	if (info.role) {
		var rolenodes = factory.createRole(info.role);
		sencenode.append.apply(sencenode, rolenodes);
	}
	if (info.status) {
		var statusnode = factory.createStatus(info.status);
		sencenode.append(statusnode);
	}

	return sencenode;
}

function getSence(sencename) {
	var data = getInfo();
	var info = data[sencename];
	$.each(info, function(i, n) {
		if (typeof(n) == "string") {
			info[i] = getSence(n)[i];
		}
	});
	return info;
}


$(function() {
	(function() {
		var node = $("#selSence");
		var data = getInfo();
		$.each(data, function(i, n) {
			node.append("<option value='" + i + "'>" + i + "</option>");
		});
		node.change(function(e) {
			var val = $(this).val();
			loadSence(val);
		});
		node.val("step4-status");
		node.change();
	})();

	// loadSence("lineup");
});


function getInfo() {
	return {
		"step1-normal": {

			"map": [
				["flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat"],
				["flat", "flat", "flat", "water", "water", "water", "flat", "flat", "water", "water", "flat", "flat"],
				["flat", "flat", "flat", "flat", "flat", "water", "hill", "flat", "flat", "water", "hill", "flat"],
				["flat", "hill", "hill", "mire", "hill", "water", "flat", "flat", "hill", "water", "flat", "flat"],
				["flat", "flat", "mire", "stone", "hill", "water", "flat", "flat", "hill", "water", "flat", "flat"],
				["flat", "flat", "mire", "stone", "flat", "water", "water", "flat", "hill", "water", "flat", "flat"],
				["flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "hill", "water", "flat", "flat"],
				["flat", "flat", "flat", "flat", "flat", "flat", "flat", "flat", "hill", "water", "flat", "flat"]
			]
		},
		"step2-lineup": {
			"map": "step1-normal",
			"lineup": [
				["lineupred", null, null, null, null, null, null, null, null, null, "lineupwhite", "lineupwhite"],
				[null, "lineupred", null, null, null, null, null, null, null, null, null, null],
				["lineupred", null, null, null, null, null, null, null, null, null, "lineupwhite", "lineupwhite"],
				[null, "lineupred", null, null, null, null, null, null, null, null, null, null],
				["lineupred", null, null, null, null, null, null, null, null, null, "lineupwhite", "lineupwhite"],
				[null, "lineupred", null, null, null, null, null, null, null, null, null, null],
				["lineupred", null, null, null, null, null, null, null, null, null, "lineupwhite", "lineupwhite"],
				[null, "lineupred", null, null, null, null, null, null, null, null, null, null]

			]
		},
		"step3-role": {
			"map": "step1-normal",
			/*
			Warrior战士 
			Mage法师 
			Preist牧师 
			Rouge盗贼 
			Paladin骑士 
			Warlock术士 
			Druid德鲁依 
			Shaman萨满 
			*/
			"role": [
				[{
						"role": "Warrior",
						"color": "red"
					},
					null, null, null, null, null, null, null, null, null, {
						"role": "Mage",
						"color": "white"
					},
					null
				],
				[null, null, null, null, null, null, null, null, null, null, null, null],
				[null, null, null, null, null, null, null, null, null, null, null, {
					"role": "Warrior",
					"color": "white"
				}],
				[null, {
						"role": "Mage",
						"color": "red"
					},
					null, null, null, null, null, null, null, null, null, null
				],
				[null, null, null, null, null, null, null, null, null, null, {
						"role": "Warrior",
						"color": "white"
					},
					null
				],
				[null, {
						"role": "Mage",
						"color": "red"
					},
					null, null, null, null, null, null, null, null, null, null
				],
				[null, null, null, null, null, null, null, null, null, null, null, {
					"role": "Druid",
					"color": "white"
				}],
				[null, {
						"role": "Shaman",
						"color": "red"
					},
					null, null, null, null, null, null, null, null, null, null
				]

			]
		},
		"step4-status": {
			"status": {
				"armycolor": "white",
				"role": "Warrior",
				"hp": 200,
				"hpmax": 500,
				"mp": 200,
				"mpmax": 300,
				"mprecover": 50,
				"damage": 125,
				"speed": 30,
				"power": 3,
				"buff": ["mparch","firesprite"]

			}
		}
	};

}

function getCfg(name) {
	return {
		mapelem: {
			size: 60
		},
		lineup: {
			size: 48
		},
		role: {
			size: 50
		},
		status: {
			width: 240
		},
		base: {
			boxsize: 64,
			mapwidth: 12,
			mapheight: 8
		}
	}[name];
}